<template>
    <div id="container">
        <mavon-editor class="editClass" v-model="markDownValue" :subfield="propJson.subfield === 'double' ? true : false"
            :defaultOpen="propJson.defaultOpen" :placeholder="propJson.placeHolder"
            :editable="propJson.editable" :toolbarsFlag="propJson.toolbarsFlag" :ishljs="propJson.ishljs"
            :style="execHeight" :toolbars="propJson.toolbars" :info="getMarkDownValue" @change="valueChange" @imgAdd="imgAdd" ref="md"
            :box-shadow="propJson.isBoxShadow"/>
    </div>
</template>

<script>
import {doThirdServiceValue, getBuildParam} from "@/request/lowcode/thirdService";
import {commonParamChange, getCommonParamObj} from "@/utils/commonParamUtil";
import request from '@/utils/request'

export default {
    name: "MarkDownComponent",
    props: ['propJson', 'commonParam'],
    data() {
        return {
            markDownValue: ""
        }
    },
    methods: {
        execThen(resValue, execParam) {
            this.markDownValue = resValue;
            this.$nextTick(() => {
                this.setMarkDownDirToCommonParam();
            });
        },
        setMarkDownDirToCommonParam() {
            if (this.propJson.isRelateMarkDownDir) {
                let contextElement = document.getElementsByClassName("v-show-content")
                let variableObj = getCommonParamObj(this.commonParam, this.propJson.markDownVariable);
                let markDownContainer = contextElement[0];
                if (markDownContainer.children.length > 0) {
                    variableObj.variableValue = markDownContainer;
                }
            }
        },
        execCatch(resValue) {

        },
        valueChange(value, render) {
            // 根据当前数据设置到当前变量中
            if (this.propJson.bindVariable) {
                this.markDownValue = value
                commonParamChange(this.commonParam, this.propJson.bindVariable, value);
            }
            if (this.propJson.htmlBindVariable) {
                commonParamChange(this.commonParam, this.propJson.htmlBindVariable, render);
            }
        },
        async imgAdd(pos, $file){
            let url = this.propJson.doUploadAction.apiPath
            let requestType = this.propJson.doUploadAction.apiMethod
            // 构建参数
            let formData = new FormData();
            let uploadImageRequestVariable = this.propJson.imageInnerVariable;
            let fileRequestVariable = uploadImageRequestVariable[0]
            if (fileRequestVariable.variableName) {
                let variableName = fileRequestVariable.variableName;
                if (fileRequestVariable.variableName.startsWith("$.")) {
                    variableName = variableName.substring(2, variableName.length);
                }
                formData.append(variableName.toString(), $file)
            }
            let realParam = await getBuildParam(this.propJson.doUploadAction, this.commonParam);
            for (let objName in realParam) {
                formData.append(objName, realParam[objName]);
            }
            request({
                url: url,
                method: requestType,
                data: formData
            }).then(res => {
                let queryInfo = this.$jsonpath.query(res, this.propJson.returnUrlJsonPath)
                let resInfo;
                if (queryInfo instanceof Array) {
                    resInfo = queryInfo[0]
                } else {
                    resInfo = queryInfo
                }
                this.$refs.md.$img2Url(pos, resInfo);
            })
        }
    },
    computed: {
        execHeight() {
            let style = "";
            if (this.propJson.height) {
                style += "height: " + this.propJson.height + ";";
            }
            if (this.propJson.editFlag) {
                style += "width: 94%;";
                style += "margin-left: 3%;";
            }
            return style;
        },
        async getMarkDownValue() {
            if (this.propJson.editFlag) {
                return;
            }
            let variableObj = getCommonParamObj(this.commonParam, this.propJson.markDownVariable);
            if (variableObj) {
                variableObj.variableValue = {};
            }
            await doThirdServiceValue(this.propJson.actionInfo, this.commonParam, this.execThen, this.execCatch, null)
        }
    }
}
</script>

<style scoped lang="less">
.editClass {

}
</style>